<template>
  <div class="dropdownTrigger">
    <!-- 底板 -->
    <div class="dtfloor" @click="panelBool_change" v-if="panelBool"></div>
    <!-- 当前选中项 -->
    <div class="activeItemCont no_copy" @click="panelBool_change">
      <template v-if="activeItem&&activeItem.id">
        <!-- <i :class="activeItem.icon"></i> -->
        <span>{{ activeItem.propertyName }}</span>
        <i v-if="del" @click="delsend" class="el-icon-close"></i>
      </template>
      <template v-else>
        <!-- <i></i> -->
        <span>暂无属性</span>
        <i v-if="del" @click="delsend" class="el-icon-close"></i>
      </template>
    </div>
    <div
      class="panel no_copy"
      v-if="overallScreeningData"
      :style="{height:panelBool?'5.4rem':'0',width:group?overallScreeningData.length*1.2+'rem':'2rem',overflow:show_model}"
    >
      <div class="right_p">
        <header class="flex_sta">
          <el-input
            suffix-icon="el-icon-search"
            v-model="search_query"
            placeholder="请输入内容"
            size="mini"
            class="right_top_search"
          ></el-input>
          <div v-if="group" class="groupChange">
            <span
              @click="jumpAnchor(_i)"
              :class="dq_par===_i.id?'activespan':''"
              v-for="_i in overallScreeningData"
              :key="_i.id"
            >{{_i.name}}</span>
          </div>
        </header>
        <section id="dropdownTriggerscrollsection">
          <div
            class="sec_cont"
            :id="'dropdownTrigger'+_i.id"
            v-for="_i in mappingArray"
            :key="_i.id"
          >
            <div class="sec_con_til flex_sta">
              {{_i.name}}
              <i></i>
            </div>
            <recursionMap
              @change="changeActive"
              :activeItem="activeItem"
              :promptPanel="promptPanel"
              v-for="(_item) in _i.children"
              :key="_item.id"
              :options="_item"
            ></recursionMap>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import recursionMap from "./recursionMap.vue";
export default {
  name: "dropdownTrigger",
  props: {
    del: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    //  接受的进行处理的全部数据
    overallScreeningData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    //  接受的当前选中项
    activeItemEnter: {
      type: Object,
      default: () => {
        // return {
        //   id: null,
        //   icon: null,
        //   value: null,
        //   name: null,
        //   propTxt: null,
        //   prop: null,
        //   ps: null
        // };
        return null;
      }
    },
    // 是否显示分组标签
    group: {
      type: Boolean,
      default: false
    },
    // 是否显示提示面板
    promptPanel: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    panelBool() {
      if (this.panelBool) {
        setTimeout(() => {
          if (this.panelBool) {
            this.show_model = "visible";
          }
        }, 600);
      } else {
        this.show_model = "hidden";
        this.search_query = "";
      }
    }
  },
  components: { recursionMap },
  data() {
    return {
      activeItem: null,
      antiShake: false,
      show_model: "hidden",
      search_query: "",
      dq_par: null, // 当前分组
      search: null, // 搜索关键字
      panelBool: false
    };
  },
  methods: {
    delsend() {
      this.$emit("del");
    },
    jumpAnchor(obj) {
      this.dq_par = obj.id;
      this.search_query = "";
      try {
        this.$el.querySelector("#dropdownTrigger" + obj.id).scrollIntoView({
          behavior: "smooth", // 平滑过渡
          block: "nearest" // 上边框与视窗顶部平齐
        });
      } catch (err) {
        this.$message({
          message: err,
          type: "warning"
        });
      }
    },
    panelBool_change() {
      if (this.antiShake) {
        return;
      }
      this.panelBool = !this.panelBool;
      this.antiShake = true;
      setTimeout(() => {
        this.antiShake = false;
      }, 600);
    },
    changeActive(item) {
      this.activeItem = item;
      this.$emit("change", item);
      this.panelBool = false;
    },
    searchDeep(query, obj) {
      if (obj && obj.children && Array.isArray(obj.children)) {
        obj.children = obj.children.filter(_i => {
          return this.searchDeep(query, _i);
        });
      } else {
        if (
          obj &&
          obj.propertyName &&
          obj.propertyName.toLowerCase().indexOf(query) !== -1
        ) {
          return true;
        } else {
          return false;
        }
      }
      return obj;
    },
    chooseDeep(obj) {
      let _obj = {};
      if (Array.isArray(obj)) {
        for (let index = 0; index <= obj.length - 1; index++) {
          if (!_obj || !_obj.id) {
            _obj = this.chooseDeep(obj[index]);
          }
        }
      }
      if (!Array.isArray(obj) && obj.children) {
        for (let index = 0; index <= obj.children.length - 1; index++) {
          if (!_obj || !_obj.id) {
            _obj = this.chooseDeep(obj.children[index]);
          }
        }
      }
      if (!Array.isArray(obj) && !obj.children && obj.id) {
        _obj = JSON.parse(JSON.stringify(obj));
      }
      return _obj;
    }
  },
  beforeCreate() {},
  created() {
    // if (!this.activeItemEnter || !this.activeItemEnter.id) {
    //   this.activeItem = this.chooseDeep(this.overallScreeningData);
    // } else {
    //   this.activeItem = JSON.parse(JSON.stringify(this.activeItemEnter));
    // }
    // this.$emit("changeFirst", this.activeItem);
    if(this.activeItemEnter&&this.activeItemEnter.id){
      this.activeItem = JSON.parse(JSON.stringify(this.activeItemEnter));
    }
  },
  beforeMount() {},
  mounted() {},
  computed: {
    //   映射数组，根据全部数据和查询关键字筛选显示数组
    mappingArray() {
      let str = this.search_query.toLowerCase();
      let that = this;
      let _arr = JSON.parse(JSON.stringify(this.overallScreeningData));
      try {
        for (let index = 0; index <= _arr.length - 1; index++) {
          _arr[index] = that.searchDeep(str, _arr[index]);
        }
      } catch (err) {
        console.log(err, "错误");
      }
      return _arr;
    }
  }
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.dropdownTrigger {
  // overflow:visible;
  position: relative;
  display: inline-block;
  height: 0.52rem;
  border: 1px solid rgba($color: #909399, $alpha: 0.6);
  border-radius: 3px;
  margin: 0 0.1rem;
  transition: all ease 0.5s;
  background: white;
  .activeItemCont {
    // height: 0.46rem;
    display: inline-block;
    // min-width: 1rem;
    // line-height: 0.4rem;
    font-size: 13px;
    margin: 0 0.2rem;
    height: 0.52rem;
    line-height: 0.52rem;
    i {
      margin: 0 0.1rem 0 0.2rem;
    }
    .el-icon-close {
      margin: 0 0.1rem 0 0;
      transition: all 0.5s ease;
    }
    .el-icon-close:hover {
      transform: rotate(90deg);
      color: #307ef2;
      font-weight: 600;
    }
    span {
      margin: 0 0 0 0;
      font-size: 0.1rem;
      letter-spacing: 0.01rem;
    }
  }
  .panel {
    .right_p {
      position: absolute;
      right: 0;
      top: 0.1rem;
      bottom: 0.1rem;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      header {
        width: 99%;
        // height: 0.46rem;
        justify-content: flex-start;
        margin: 0 auto 0.1rem;
        flex-direction: column;
        .groupChange {
          width: 100%;
          height: 0.6rem;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            color: #475669;
            background-color: #f6f8fd;
            font-size: 0.05rem;
            height: 0.38rem;
            line-height: 0.38rem;
            padding: 0 0.1rem;
            margin: 0 0.1rem;
            min-width: 1rem;
            text-align: center;
            display: inline-block;
            border: 1px solid #e0e6ed;
            border-radius: 4px;
          }
          span:hover {
            color: rgba($color: #00b265, $alpha: 0.8);
          }
          .activespan {
            color: rgba($color: #00b265, $alpha: 0.8);
            border: 1px solid rgba($color: #00b265, $alpha: 0.6);
            background: rgba($color: #00b265, $alpha: 0.1);
          }
        }
      }
      section::-webkit-scrollbar {
        display: none;
      }
      section {
        flex: 1;
        width: 99%;
        margin: 0 auto 0.1rem;
        overflow-y: scroll;
        scrollbar-width: none; /*Firefox*/
        -ms-overflow-style: none;
        .sec_cont {
          width: 100%;
          margin: 0 auto 0.1rem;
          .sec_con_til {
            width: 100%;
            height: 0.5rem;
            line-height: 0.64rem;
            font-size: 13px;
            font-weight: 500;
            text-indent: 0.2rem;
            color: #475669;
            position: relative;
            i {
              position: absolute;
              display: inline-block;
              background: rgba($color: #01b27a, $alpha: 0.8);
              width: 0.04rem;
              height: 40%;
              top: 30%;
              left: 0.1rem;
            }
          }
        }
      }
    }
    position: absolute;
    left: 0;
    top: 0.5rem;
    min-width: 5rem !important;
    z-index: 10;
    transition: all ease 0.5s;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }
  .dtfloor {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba($color: #01b27a, $alpha: 0);
  }
}
.dropdownTrigger:hover {
  border: 1px solid rgba($color: #01b27a, $alpha: 1);
  box-shadow: 0.02rem 0.02rem 0.01rem rgba($color: #01b27a, $alpha: 0.2);
  .activeItemCont {
    color: rgba($color: #01b27a, $alpha: 0.8);
  }
}
</style>
